import "./index.scss"
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import {observer} from 'mobx-react'  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
import {Button, Col, Form, Input, Row, Select} from 'antd';
import React from 'react';
const { Option } = Select;


const QueryContent = () => {
    const [form] = Form.useForm();

    const submit = () => {
      const obj= form.getFieldsValue(true)
        for (let key in obj){
            obj[key]=obj[key].trim()
            if (obj[key]==='全部'){
                obj[key]=''
            }
        }
        console.log(obj)
        store.content.queryContent(obj)
    };
    const onReset = () => {
        form.resetFields();
    };

    return (
        <div id={"content_query"}>
            <Row justify={"end"}>
                <Col pull={1}>
                    <Button type="link" onClick={onReset}>重置</Button>
                </Col>
                <Col pull={1}>
                    <Button type="primary" onClick={submit}>查询</Button>
                </Col>
            </Row>
            <Form
                form = { form }
                name="basic"
                autoComplete="off"
                labelCol={{span:6}}
                className={"form"}
                initialValues={{
                        state: '全部',
                        app: '全部'
                    }}
            >
                <Form.Item
                    label="内容名称"
                    name="name"
                    className={"formItem"}
                >
                        <Input/>
                </Form.Item>
                <Form.Item
                    label="作者"
                    name="writer"
                    className={"formItem"}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="状态"
                    name="state"
                    className={"formItem"}
                >
                    <Select
                        allowClear
                    >
                        <Option value="全部">全部</Option>
                        <Option value="上架">上架</Option>
                        <Option value="下架">下架</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="所属app"
                    name="app"
                    className={"formItem"}
                >
                    <Select
                        allowClear
                    >
                        <Option value="全部">全部</Option>
                        <Option value="小黑早教">小黑早教</Option>
                        <Option value="小黑绘本">小黑绘本</Option>
                        <Option value="萌萌乐卡通">萌萌乐卡通</Option>
                        <Option value="萌萌儿歌">萌萌儿歌</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="标签"
                    name="label"
                    className={"formItem"}
                >
                    <Input/>
                </Form.Item>
            </Form>
        </div>
    );
}
export default observer(QueryContent)